/**
* @author: mayabo
* @date: 2021-11-02
* @description: 人员管理
*/
<template>
  <div class="rolesConfigure">
    <div class="content-box">
      <div>菜单权限</div>
      <div>功能权限</div>
      <div>数据权限</div>
    </div>
    <div class="item-box" v-for="(item) in dataList" :key="item.function.id">
      <div class="left-box">
        <Checkbox @on-change="changemenu(item.function)" v-model="item.function.ischecked" >{{item.function.functionName}}</Checkbox>
      </div>
      <div class="center-box">
        <span v-if="item.functionParas && item.functionParas.length === 0">
          无
        </span>
        <div v-else>
          <Checkbox @on-change="changebtu(btuitem)"  v-for="(btuitem,index) in item.functionParas" :key="index"  v-model="btuitem.ischecked" >{{btuitem.paraName}}</Checkbox>
        </div>

      </div>
      <div class="right-box">
        <Select v-model="model1" class="select-box" style="width: 200px">
          <Option v-for="(item,index) in cityList" :value="item.value" :key="index">{{
            item.label
          }}</Option>
        </Select>
      </div>
    </div>
  </div>
</template>

<script type="text/jsx">

import {
  GetRoleSetInfo,
  GetFunction,
  SetRoleFunction,
  SetRoleFunctionPara
} from '@/api/system/roles.js'
export default {
  name: 'rolesConfigure',
  components: {},
  data () {
    return {
      cityList: [
      ],
      model1: '',
      dataList: []
    }
  },
  created () {},
  mounted () {
    this.GetFunctionList()
  },
  methods: {
    // 根据id获取权限数据
    GetRoleSetInfo (allData) {
      let that = this
      var query = that.$route.query
      if (!query.id) {
        return
      }
      GetRoleSetInfo(query.id).then((res) => {
        if (res.status === 200) {
          this.resetData(allData, res.data)
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    GetFunctionList () {
      GetFunction().then((res) => {
        if (res.status === 200) {
          this.GetRoleSetInfo(res.data)
        } else {
          this.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    resetData (allData, Roledata) {
      // 判断角色配置信息是否为空
      if (!Roledata && Roledata.length === 0) {
        this.tableData = allData
        return false
      }
      // 判断全部数据是否为空
      if (!this.allData && !allData.length === 0) {
        return false
      }
      for (let i = 0; i < allData.length; i++) {
        let allItmes = allData[i] // 全部数据的每个子元素
        for (let j = 0; j < Roledata.functionRoles.length; j++) {
          let menuItem = Roledata.functionRoles[j] // 角色菜单的子元素
          if (allItmes.function && allItmes.function.id === menuItem.function.id) { // 判断全部数据的子元素菜单是否有权限
            allItmes.function.ischecked = true // 有权限则回显
          }
          this.resetBtuData(allItmes.functionParas, Roledata.fun_Para_Roles)
        }
      }
      console.log(allData)
      this.dataList = allData
    },
    // 查询是否按钮权限
    resetBtuData (fbtu, sbtu) {
      for (let i = 0; i < fbtu.length; i++) { // 循环 全部数据的子元素（按钮）
        let fitem = fbtu[i]
        for (let j = 0; j < sbtu.length; j++) { // 循环 角色的权限子元素（按钮）
          let sitem = sbtu[j].functionPara
          if (fitem.id === sitem.id) {
            fitem.ischecked = true
          }
        }
      }
    },
    // 菜单列多选框改变
    changemenu (item) {
      console.log(item)
      let params = {
        functionID: item.id,
        roleID: this.$route.query.id,
        isSet: item.ischecked
      }
      SetRoleFunction(params).then((res) => {
        if (res.status === 200) {
          this.$Message.success('配置成功')
          this.GetFunctionList()
        } else {
          this.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    // 按钮列多选框改变
    changebtu (item) {
      console.log(item)
      let params = {
        functionParaID: item.id,
        roleID: this.$route.query.id,
        isSet: item.ischecked
      }
      SetRoleFunctionPara(params).then((res) => {
        if (res.status === 200) {
          this.$Message.success('配置成功')
          this.GetFunctionList()
        } else {
          this.$Message.warning('请求失败，请联系管理员！')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "./styles/rolesConfigure.less";
</style>
